<template>
  <div class="content-container">
    <div class="titleName">监测数据</div>
    <el-card class="box-card searchCard" shadow="never">
      <div class="searchParameter">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
          size="small"
          @keyup.enter.native="handleQuery"
        >
          <el-form-item label="时间" prop="name">
            <el-date-picker
              v-model="timeData"
              :clearable="false"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="name">
            <el-radio-group v-model="radio" @change="radioChange">
              <el-radio :label="1">分钟</el-radio>
              <el-radio :label="2">小时</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="searchBtn">
        <div class="styleBtn">
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetTime">重置</el-button>
          <el-button type="primary" @click="showEcharts">小时曲线</el-button>
        </div>
      </div>
    </el-card>
    <monitoring-table/>
    <history-model ref="historyModel"/>
  </div>
</template>

<script>
import { Mixin } from '@/utils/mixin/Mixin'
import HistoryModel from '@/views/onlineMonitor/history/model/HistoryModel'
import MonitoringTable from '@/views/earlyWarning/earlyWarningList/model/MonitoringTable'

export default {
  name: 'MonitoringData',
  mixins: [Mixin],
  components: {
    HistoryModel,
    MonitoringTable
  },
  data() {
    return {
      timeData: [],
      radio: 1,
      showStatus: true,
      url: {
        list: 'qqq'
      }
    }
  },
  watch: {
    timeData: {
      handler(val) {
        this.queryParams.startTime = val[0]
        this.queryParams.endTime = val[1]
      },
      deep: true
    }
  },
  created() {
    this.queryParams.radio = '1'
    this.getCurrentHour()
  },
  methods: {
    radioChange(e) {
      this.queryParams.radio = e
    },
    getCurrentHour() {
      const startTime = this.$time.currentHour + ':00'
      const endTime = this.$time.currentHour + ':59'
      this.timeData = [startTime, endTime]
      this.queryParams.startTime = startTime
      this.queryParams.endTime = endTime
    },
    resetTime() {
      this.getCurrentHour()
    },
    showEcharts() {
      this.$refs.historyModel.showModel()
    }
  }
}
</script>

<style lang="scss" scoped>
.content-container {
  .box-card {
    width: 100%;
    min-height: 85px;
    border-radius: 10px;
    background-color: #FFFFFF;
  }
  .titleName {
    margin: 20px 0;
    font-weight: bold;
    font-size: 18px;
  }
}

</style>
